<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <!-- <el-form-item label="地址名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入地址名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item>
        <!-- <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button> -->
         <el-button type="primary" icon="el-icon-plus"  @click="add(1)">新增父级菜单</el-button>
        <el-button type="primary" icon="el-icon-plus"   @click="add(2)">新增子级菜单</el-button>
      </el-form-item>
    </el-form>
           
<!-- 列表 -->
    <el-table
      :data="deptList" ref="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'Menu', hasChildren: 'hasChildren'}"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="菜单名称" prop="name" ></el-table-column>
      <el-table-column label="地址" prop="url" ></el-table-column>
      <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button  type="text"  icon="el-icon-edit"  @click="handleUpdate(scope.row)">修改</el-button>
          <el-button  v-if="scope.row.parentId != 0"  type="text"  icon="el-icon-delete"  @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <!-- 添加或修改部门对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body :closeOnClickModal="false" >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24" v-if="this.fName == false">
            <el-form-item label="父节点">
              <el-input v-model="parentName" placeholder="无父节点" disabled style="width:50%;"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="菜单名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入菜单名称" style="width:80%;"/>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="this.fName == false">
            <el-form-item label="菜单地址" prop="url">
              <el-input v-model="form.url" placeholder="请输入菜单地址" style="width:90%;"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" icon="el-icon-finished">确 定</el-button>
        <!-- <el-button type="primary" @click="submitUpdate" v-if=" this.fName == false">确 定</el-button> -->
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Dept",
  components: {  },
  data() {
    return {
      // 表格树数据
      deptList:[],
      // 标题 && 弹层
      title: "",
      open: false,
      // 查询参数
      queryParams: {
        name: undefined,
        status: undefined
      },
      // 表单参数      
      form: {},
      rules: {
        // pid: [
        //   { required: true, message: "上级地址不能为空", trigger: "blur" }
        // ],
        // name: [
        //   { required: true, message: "地址名称不能为空", trigger: "blur" }
        // ],
      },
      pid:0,
      multipleSelection: [],//选中菜单数组
      parentName:'',//父节点名称
      fName:true,//修改-新增判断显示-确定按钮、父级标签
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询部门列表 */
    getList() {
      this.axios.get('/monitor/Sys/Menu/getMenu').then(res => {
        this.deptList = res.data.data;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        pid: undefined,
        name: undefined,
        url:undefined,
      };
      // this.resetForm("form");
    },
    /** 搜索按钮操作 */
    // handleQuery() {
    //   this.getList();
    // },
    // /** 重置按钮操作 */
    // resetQuery() {
    //   // this.resetForm("queryForm");
    //   this.handleQuery();
    // },
    // 选中
    handleSelectionChange(val) {
      if(val.length>1){//1次选一个，清空上一个，切换选中项
        this.$refs.tableData.clearSelection()
        this.$refs.tableData.toggleRowSelection(val.pop())
        this.multipleSelection =[]
      }
      this.multipleSelection = val//没有
      console.log(val,this.multipleSelection,'vvv')
    },

    /** 新增按钮操作 */
    add(index) {
      this.reset();
      this.parentName = ''
      if (index === 1) {
        if (this.multipleSelection.length >= 1) {
          this.$message({
            message: '请勿选择节点进行操作'
          })
          return
        }
        this.fName = true
        this.form={
            pid:0,
            parentName:undefined,
        }
      }else if (index === 2) {
          if (this.multipleSelection.length === 0) {
            this.$message({
              message: '请选择父节点'
            })
            return
          }
          this.fName = false
          this.form={//显示父节点
              pid:this.multipleSelection[0].id,
          }
          this.parentName = this.multipleSelection[0].name
      } 
      this.open = true;
      this.title = "添加菜单";
    },
        /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
            console.log(this.form,'新增');
            this.axios({url:'/monitor/Sys/Menu/SaveMenu',method:'post',data:this.form,}).then(res => {
              this.$message({ type: "success", message: "新增成功!",});
              this.open = false;
              this.getList();
            });
        }
      });
    },
    /** 修改按钮操作 */
    // handleUpdate(row) {
    //   this.reset();
    //   // console.log(this.multipleSelection[0],'this.multipleSelection[0]');
    //   // this.parentName = this.multipleSelection[0].name//父节点名称展示
    //   this.form = row
    //   this.open = true;
    //   this.fName = false//父级显示
    //   this.title = "修改菜单";
    //   console.log(row,'编辑');
    // },
    //  submitUpdate: function() {//修改-确定按钮
    //   this.$refs["form"].validate(valid => {
    //     if (valid) {
    //     console.log(this.form,'修改');              
    //     this.axios({url:'/monitor/Sys/Menu/SaveMenu',method:'post',data:this.form,}).then(res => {
    //       this.$message({ type: "success", message: "修改成功!",});
    //       this.open = false;
    //       this.getList();
    //     });
    //     }
    //   });
    // },
    
  }
};
</script>
<style >
  .el-input.is-disabled .el-input__inner{
    color: black !important;
  }
</style>